<template>
  <div class="ptz">
    <div class="btn-container">
      <div class="outer-ring">
        <div class="line line-1"></div>
        <div class="line line-2"></div>
        <div class="line line-3"></div>
        <div class="line line-4"></div>
        <div class="line line-5"></div>
        <div class="line line-6"></div>
        <div class="line line-7"></div>
        <div class="line line-8"></div>
        <!-- 上 -->
        <i
          class="el-icon-arrow-up caret-up"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(0)"
          @mouseup="handleKeyup"
        />
        <!-- 下 -->
        <i
          class="el-icon-arrow-down caret-down"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(1)"
          @mouseup="handleKeyup"
        />
        <!-- 左 -->
        <i
          class="el-icon-arrow-left caret-left"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(2)"
          @mouseup="handleKeyup"
        />
        <!-- 右 -->
        <i
          class="el-icon-arrow-right caret-right"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(3)"
          @mouseup="handleKeyup"
        />
        <div class="inner-ring">
          <i
            class="el-icon-refresh center-revolve"
            :class="isBtnDisabled ? 'disabled' : ''"
            @click="ptzController(14)"
          />
        </div>
        <!-- 左上 -->
        <i
          class="el-icon-top-left ob-caret-left"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(4)"
          @mouseup="handleKeyup"
        />
        <!-- 右上 -->
        <i
          class="el-icon-top-right ob-caret-up"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(6)"
          @mouseup="handleKeyup"
        />
        <!-- 右下 -->
        <i
          class="el-icon-bottom-right ob-caret-right"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(7)"
          @mouseup="handleKeyup"
        />
        <!-- 左下 -->
        <i
          class="el-icon-bottom-left ob-caret-down"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(5)"
          @mouseup="handleKeyup"
        />
      </div>
      <div class="btn-group" v-if="false">
        <!-- 放大 -->
        <i
          class="el-icon-zoom-in zoom-in"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(8)"
          @mouseup="handleKeyup"
        />
        <!-- 加号 -->
        <i
          class="el-icon-plus plus"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(9)"
          @mouseup="handleKeyup"
        />
        <!-- 光圈大 -->
        <i
          v-if="false"
          class="el-icon-rank rank"
          :class="isBtnDisabled ? 'disabled' : ''"
          @click="ptzController(10)"
        />
        <!-- 缩小 -->
        <i
          class="el-icon-zoom-out zoom-out"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(11)"
          @mouseup="handleKeyup"
        />
        <!-- 减号 -->
        <i
          class="el-icon-minus minus"
          :class="isBtnDisabled ? 'disabled' : ''"
          @mousedown="ptzController(12)"
          @mouseup="handleKeyup"
        />
        <!-- 光圈小 -->
        <i
          v-if="false"
          class="el-icon-crop crop"
          :class="isBtnDisabled ? 'disabled' : ''"
          @click="ptzController(13)"
        />
      </div>
    </div>
    <div class="slider-container">
      <span>转动速</span>
      <el-slider
        @change="changeSpeed"
        v-model="sliderValue"
        show-input
        :disabled="isBtnDisabled"
        :min="1"
        :max="8"
        :step="1"
      ></el-slider>
    </div>
  </div>
</template>

<script>
import { updateCameraSpeed } from '@/api/camera';
export default {
  name: 'GimbalButton',
  data() {
    return {
      // 转动速度
      sliderValue: 4,
    };
  },
  props: {
    // 按钮是否禁用
    isBtnDisabled: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    // 当前播放的视频对象
    currentVideo() {
      return this.$store.getters['playVideo/getCurrentPlayingVideo'];
    },
    // config配置
    config() {
      return this.$store.getters['websocketClient/config'];
    },
  },
  watch: {
    sliderValue: {
      handler(newValue) {
        this.$store.dispatch('websocketClient/sendMessage', {
          ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
          message: {
            cameraId: this.currentVideo.cameraId,
            command: { speed: newValue },
          },
        });
      },
    },
    currentVideo: {
      handler(newValue) {
        this.sliderValue = Number(newValue.speed) || 4;
      },
      deep: true,
    },
  },
  methods: {
    // 处理松开方向键停止运动
    handleKeyup() {
      console.log('停止');
      this.$store.dispatch('websocketClient/sendMessage', {
        ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
        message: {
          cameraId: this.currentVideo.cameraId,
          command: this.config['btnCommand']['stopMoving'],
        },
      });
    },
    // 云台控制
    ptzController(conno) {
      switch (conno) {
        case 0:
          console.log('云台向上');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraUp'],
            },
          });
          break;
        case 1:
          console.log('云台向下');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraDown'],
            },
          });
          break;
        case 2:
          console.log('云台向左');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraLeft'],
            },
          });
          break;
        case 3:
          console.log('云台向右');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraRight'],
            },
          });
          break;
        case 4:
          console.log('云台左上');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraLeftUp'],
            },
          });
          break;
        case 5:
          console.log('云台左下');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraLeftDown'],
            },
          });
          break;
        case 6:
          console.log('云台右上');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraRightUp'],
            },
          });
          break;
        case 7:
          console.log('云台右下');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraRightDown'],
            },
          });
          break;
        case 8:
          console.log('放大');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraZoomIn'],
            },
          });
          break;
        case 9:
          console.log('加号');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraZoomPlus'],
            },
          });
          break;
        case 10:
          console.log('变焦大');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraZoomBig'],
            },
          });
          break;
        case 11:
          console.log('缩小');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraZoomOut'],
            },
          });
          break;
        case 12:
          console.log('减号');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraZoomMinus'],
            },
          });
          break;
        case 13:
          console.log('变焦小');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraZoomSmall'],
            },
          });
          break;
        case 14:
          console.log('旋转');
          this.$store.dispatch('websocketClient/sendMessage', {
            ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
            message: {
              cameraId: this.currentVideo.cameraId,
              command: this.config['btnCommand']['cameraRotate'],
            },
          });
          break;
        default:
          break;
      }
    },
    // 修改转到速度
    async changeSpeed(value) {
      const param = {
        id: this.currentVideo.id,
        speed: value,
      };
      const res = await updateCameraSpeed(param);
      if (res.code === 200) {
        this.$message.success('修改成功');
        this.$emit('on-refresh');
      } else {
        this.$message.error('修改失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ptz {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  flex-direction: column;
}
.btn-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
}
.outer-ring {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow:
    inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  .line {
    height: 1px;
    width: 36px;
    background-color: #ddd;
    position: absolute;
    &.line-1 {
      top: 22px;
      left: 34px;
      transform: rotate(60deg);
    }
    &.line-2 {
      top: 22px;
      right: 34px;
      transform: rotate(-60deg);
    }
    &.line-3 {
      bottom: 22px;
      left: 34px;
      transform: rotate(-60deg);
    }
    &.line-4 {
      bottom: 22px;
      right: 34px;
      transform: rotate(60deg);
    }
    &.line-5 {
      top: 50px;
      left: 4px;
      transform: rotate(30deg);
    }
    &.line-6 {
      top: 50px;
      right: 4px;
      transform: rotate(-30deg);
    }
    &.line-7 {
      bottom: 50px;
      left: 4px;
      transform: rotate(-30deg);
    }
    &.line-8 {
      bottom: 50px;
      right: 4px;
      transform: rotate(30deg);
    }
  }

  i {
    font-size: 20px;
    width: 20px; /* 显式设置宽度 */
    height: 20px; /* 显式设置高度 */
    display: inline-block; /* 确保块级元素行为 */
    // border: 1px solid #ddd;
  }
  .caret-up {
    position: absolute;
    top: 6px;
    left: 75px;
    margin-left: -10px;
  }
  .caret-down {
    position: absolute;
    bottom: 6px;
    left: 75px;
    margin-left: -10px;
  }
  .caret-left {
    position: absolute;
    left: 6px;
    top: 75px;
    margin-top: -10px;
  }
  .caret-right {
    position: absolute;
    right: 6px;
    top: 75px;
    margin-top: -10px;
  }
  .ob-caret-left {
    transform: rotate(0deg);
    position: absolute;
    top: 24px;
    left: 24px;
  }
  .ob-caret-up {
    transform: rotate(0deg);
    position: absolute;
    top: 24px;
    right: 24px;
  }
  .ob-caret-right {
    transform: rotate(0deg);
    position: absolute;
    bottom: 24px;
    right: 24px;
  }
  .ob-caret-down {
    transform: rotate(0deg);
    position: absolute;
    bottom: 24px;
    left: 24px;
  }

  .inner-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ddd;
    .center-revolve {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      font-size: 40px;
    }
    .plus {
      position: absolute;
      top: 10px;
      left: 40px;
      margin-left: -10px;
    }
    // .line {
    //   height: 1px;
    //   width: 100%;
    //   background-color: #ddd;
    //   position: absolute;
    //   top: 39px;
    //   left: 0;
    // }
    .minus {
      position: absolute;
      bottom: 10px;
      left: 40px;
      margin-left: -10px;
    }
  }
}
.btn-group {
  width: 150px;
  height: 100px;
  margin-left: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: 2px;
  column-gap: 2px;
  box-sizing: border-box;
  font-size: 24px;
  align-items: center;
}
.slider-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  width: 100%;
  margin-top: 20px;
  span {
    margin-left: 5px;
    margin-right: 10px; /* 可以根据需要调整间距 */
  }
}

.el-slider {
  flex: 1; /* 滑块组件占据剩余的空间 */
  margin-right: 5px;
}

i {
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
  &.disabled {
    cursor: not-allowed;
    color: #ccc;
  }
}
</style>
